<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.headHeight"
        />
      </el-form-item>

      <el-form-item label="视图模式">
        <el-select
          v-model="optionsInfo['viewMode']"
          placeholder="请选择"
          @change="handleChangeView"
        >
          <el-option
            v-for="item in viewModeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.fontColor"
        />
      </el-form-item>
    </div>

    <!--右侧标题文案-->
    <div class="list-item-setting" v-if="optionsInfo.viewMode === 7">
      <div class="title-info">
        <el-divider content-position="left">右侧标题文本设置</el-divider>
      </div>
      <el-form-item label="文本">
        <!--   :disabled="contentDisabled || sceneInfo" -->
        <el-switch
          @change="handle7Change"
          v-model="optionsInfo.viewMode7Show"
        />
      </el-form-item>
      <template v-if="optionsInfo.viewMode7Show">
        <el-form-item label="文本内容">
          <el-input
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.content"
          />
        </el-form-item>

        <el-form-item label="字号">
          <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.deptFontSize"
          />
        </el-form-item>

        <el-form-item label="字体颜色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.deptFontColor"
          />
        </el-form-item>

        <el-form-item
          class="logo-area-set"
          label="背景图"
          v-if="optionsInfo.viewMode === 6"
        >
          <el-button
            type="primary"
            @click="handleSelects('deptAreaUrl', optionsInfo.deptAreaUrl)"
            >选择素材</el-button
          >
          <div class="picture-wrap">
            <template
              v-if="
                !!(
                  !!optionsInfo?.deptAreaUrl &&
                  !!optionsInfo?.deptAreaUrl?.length &&
                  !!optionsInfo?.deptAreaUrl[0].url
                )
              "
            >
              <img :src="`${optionsInfo.deptAreaUrl[0]?.url}`" alt="医院信息" />
              <p class="icon-wrap" @click="handleDeletePicture('deptAreaUrl')">
                <i class="el-icon-close icon-delete" />
              </p>
            </template>
            <template v-else>
              <div
                class="el-upload el-upload--text"
                @click="handleSelects('deptAreaUrl', optionsInfo.deptAreaUrl)"
              >
                <i class="el-icon-plus avatar-uploader-icon" />
              </div>
            </template>
          </div>
        </el-form-item>
      </template>
    </div>
    <!--右侧标题文案-->
    <div class="list-item-setting" v-if="optionsInfo.viewMode === 8">
      <div class="title-info">
        <el-divider content-position="left">中间时分设置</el-divider>
      </div>
      <el-form-item label="时分背景颜色" v-if="optionsInfo.dataHoursMinBack">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.dataHoursMinBack"
        />
      </el-form-item>
      <el-form-item label="时分字体颜色" v-if="optionsInfo.dataHoursMinColor">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.dataHoursMinColor"
        />
      </el-form-item>
      <el-form-item label="时分背景高度" v-if="optionsInfo.dataHoursMinHeight">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.dataHoursMinHeight"
        />
      </el-form-item>
      <el-form-item label="时分背景宽度" v-if="optionsInfo.dataHoursMinWidth">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.dataHoursMinWidth"
        />
      </el-form-item>
      <el-form-item label="时分圆角">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.timeBorderRadius"
        />
      </el-form-item>
    </div>
    <!--企业Logo-->
    <div class="list-item-setting" v-if="true">
      <div class="title-info">
        <el-divider content-position="left">Logo</el-divider>
      </div>
      <el-form-item label="Logo">
        <el-switch v-model="optionsInfo.logoVisit" />
      </el-form-item>
      <el-form-item label="企业Logo" class="logo-area-set">
        <el-button type="primary" @click="handleSelect">选择LOGO</el-button>
        <div class="picture-wrap">
          <template v-if="!!optionsInfo?.imageUrl?.val?.url">
            <img :src="`${optionsInfo.imageUrl?.val?.url}`" alt="企业Logo" />
            <p class="icon-wrap" @click="handleDeletePicture">
              <i class="el-icon-close icon-delete" />
            </p>
          </template>
          <template v-else>
            <div class="el-upload el-upload--text" @click="handleSelect">
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="logo高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.imageHeight"
        />
      </el-form-item>
      <el-form-item label="logo底文本">
        <!--   :disabled="contentDisabled || sceneInfo" -->
        <el-switch v-model="optionsInfo.tipTextShow" />
      </el-form-item>
      <!-- <el-form-item label="logo底文本">
        <el-input
          :min="0"
          size="small"
          v-model="optionsInfo.logoContent"
        />
      </el-form-item> -->

      <el-form-item
        label="二维码(1)的-名称-图标"
        class="logo-area-set"
        v-if="optionsInfo.rcodeUrl1OnOff"
      >
        <!-- <el-button type="primary" @click="handleSelect">选择</el-button> -->
        <el-input
          size="small"
          v-model="optionsInfo.qrcodeUrl1Name"
          placeholder="名称"
          class="qrcodeMarBott"
        ></el-input>
        <div class="picture-wrap-qrcode">
          <template v-if="!!optionsInfo?.qrcodeUrl1">
            <img :src="`${optionsInfo.qrcodeUrl1}`" alt="二维码(1)" />
            <p class="icon-wrap" @click="handleDeletePicture('qrCode1')">
              <i class="el-icon-close icon-delete" />
            </p>
          </template>
          <template v-else>
            <div
              class="el-upload el-upload--text"
              @click="handleSelect('qrCode1')"
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item
        label="二维码(2)的-名称-图标"
        class="logo-area-set"
        v-if="optionsInfo.rcodeUrl2OnOff"
      >
        <!-- <el-button type="primary" @click="handleSelect">选择</el-button> -->
        <el-input
          size="small"
          v-model="optionsInfo.qrcodeUrl2Name"
          placeholder="名称"
          class="qrcodeMarBott"
        ></el-input>
        <div class="picture-wrap-qrcode">
          <template v-if="!!optionsInfo?.qrcodeUrl2">
            <img :src="`${optionsInfo.qrcodeUrl2}`" alt="二维码(2)" />
            <p class="icon-wrap" @click="handleDeletePicture('qrCode2')">
              <i class="el-icon-close icon-delete" />
            </p>
          </template>
          <template v-else>
            <div
              class="el-upload el-upload--text"
              @click="handleSelect('qrCode2')"
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-form-item>
    </div>

    <!--科室设置-->
    <div class="list-item-setting" v-if="true">
      <div class="title-info">
        <el-divider content-position="left">文本设置</el-divider>
      </div>
      <el-form-item label="文本">
        <!--   :disabled="contentDisabled || sceneInfo" -->
        <el-switch @change="handleChange" v-model="optionsInfo.contentShow" />
      </el-form-item>
      <template v-if="optionsInfo.contentShow">
        <el-form-item label="文本内容">
          <el-input
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.content"
          />
        </el-form-item>
        <el-form-item label="文本内容">
          <el-select v-model="optionsInfo.deptNameKey" placeholder="请选择">
            <el-option
              v-for="item in deptList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文本位置" v-if="optionsInfo.contentLocation">
          <el-select v-model="optionsInfo.contentLocation" placeholder="请选择">
            <el-option
              v-for="item in contentLocationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字号">
          <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.deptFontSize"
          />
        </el-form-item>

        <el-form-item label="字体颜色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.deptFontColor"
          />
        </el-form-item>

        <el-form-item label="粗细设置">
          <el-select v-model="optionsInfo.deptFontWeight" placeholder="请选择">
            <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          class="logo-area-set"
          label="背景图"
          v-if="optionsInfo.viewMode === 6"
        >
          <el-button
            type="primary"
            @click="handleSelects('deptAreaUrl', optionsInfo.deptAreaUrl)"
            >选择素材</el-button
          >
          <div class="picture-wrap">
            <template
              v-if="
                !!(
                  !!optionsInfo?.deptAreaUrl &&
                  !!optionsInfo?.deptAreaUrl?.length &&
                  !!optionsInfo?.deptAreaUrl[0].url
                )
              "
            >
              <img :src="`${optionsInfo.deptAreaUrl[0]?.url}`" alt="医院信息" />
              <p class="icon-wrap" @click="handleDeletePicture('deptAreaUrl')">
                <i class="el-icon-close icon-delete" />
              </p>
            </template>
            <template v-else>
              <div
                class="el-upload el-upload--text"
                @click="handleSelects('deptAreaUrl', optionsInfo.deptAreaUrl)"
              >
                <i class="el-icon-plus avatar-uploader-icon" />
              </div>
            </template>
          </div>
        </el-form-item>
      </template>
    </div>

    <!--时间设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">时间设置</el-divider>
      </div>
      <el-form-item label="时间格式" class="column-info">
        <el-select v-model="optionsInfo.timeValue" placeholder="请选择">
          <el-option
            v-for="item in dateTimeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="时间日期位置交换"
        label-width="130px"
        v-if="optionsInfo.viewMode === 1"
      >
        <el-switch
          @change="handleChangePosition"
          :disabled="!optionsInfo.dateShow"
          v-model="optionsInfo.changePosition"
        />
      </el-form-item>
      <el-form-item label="日期星期" label-width="130px">
        <el-switch v-model="optionsInfo.dateShow" />
      </el-form-item>
      <el-form-item label="时分背景颜色" v-if="optionsInfo.dataHoursMinBack">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.dataHoursMinBack"
        />
      </el-form-item>
      <el-form-item label="时分字体颜色" v-if="optionsInfo.dataHoursMinColor">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.dataHoursMinColor"
        />
      </el-form-item>
      <el-form-item label="时分背景高度" v-if="optionsInfo.dataHoursMinHeight">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.dataHoursMinHeight"
        />
      </el-form-item>
      <el-form-item label="时分背景宽度" v-if="optionsInfo.dataHoursMinWidth">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.dataHoursMinWidth"
        />
      </el-form-item>
    </div>

    <!--选择图片的弹层-->
    <SelectPicture
      :info="PictureInfo.info"
      :visible="PictureInfo.visible"
      @handleSure="handleSure"
      @handleCancel="handleCancel"
    />
    <!--选择图片的弹层-->
    <UpdatePicture
      :visible="PictureInfos.visible"
      :info="PictureInfos.info"
      @handleCancel="handleCancels"
      @handleSure="handleSures"
    />
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
import UpdatePicture from "@c/public/layer/template/updatePicture/index.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "headerConfig-editor",
  componentName: "headerConfig-editor",
  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  components: {
    SelectPicture,
    UpdatePicture,
  },

  data() {
    return {
      optionsInfo: Object(),
      fontWeightOptions: types["fontWeightOptions"],
      deptList: [
        {
          value: "",
          label: "",
        },
        {
          value: "deptName",
          label: "医生科室",
        },
        {
          value: "oldDeptName",
          label: "屏幕科室",
        },
        {
          value: "oldDeptShortName",
          label: "屏幕科室简称",
        },
        {
          value: "lcdName",
          label: "设备名称",
        },
      ],
      contentLocationList: [
        {
          value: "connectBoxLeft",
          label: "左",
        },
        {
          value: "connectBoxCenter",
          label: "中",
        },
        {
          value: "connectBoxRight",
          label: "右",
        },
      ],
      PictureInfo: {
        visible: false,
        info: 1,
      },
      PictureInfos: {
        visible: false,
        info: 1,
      },
      constantDic: constantDic,
      predefineColors: types["predefineColors"],
      dateTimeOptions: types["dateTimeOptions"],
      viewModeOptions: [
        {
          value: 1,
          label: "视图1",
        },
        {
          value: 2,
          label: "视图2",
        },
        {
          value: 3,
          label: "视图3",
        },
        {
          value: 4,
          label: "视图4",
        },
        {
          value: 5,
          label: "视图5",
        },
        {
          value: 6, // 九龙坡区人民医院 时间加上分割线
          label: "视图6",
        },
        {
          value: 7, // 宁夏妇女儿童医院  加右侧标题
          label: "视图7",
        },
        {
          value: 8, // 宁夏妇女儿童医院  加右侧标题
          label: "视图8",
        },
      ],
      contentDisabled: false,
      updateImg: "Logo", // 更新哪个图片  Logo、 qrCode1 、 qrCode2
    };
  },

  computed: {
    sceneInfo() {
      let { type } = this.selectedWidget;
      return this.$lodash.includes(type, "center");
    },

    // 监听详情
    templateInfos() {
      let templateInfo = localStorage.getItem("templateInfo");
      try {
        return JSON.parse(templateInfo);
      } catch (err) {
        console.log("数据异常");
      }
    },
  },

  mounted() {},

  methods: {
    // 隐藏科室
    handleChange(val) {
      Reflect.set(this.optionsInfo, "contentShow", val);

      Reflect.set(this.optionsInfo, "changePosition", false);
      if (val) {
        Reflect.set(this.optionsInfo, "split", 0.5);
      } else {
        Reflect.set(this.optionsInfo, "split", 0.05);
      }
    },
    handle7Change(val) {
      Reflect.set(this.optionsInfo, "viewMode7Show", val);
    },

    //交换日期和时间
    handleChangePosition(val) {
      this.optionModel.headerConfig.changePosition = val;
    },

    // 选择图片
    handleSelects(val, content) {
      let params = Object();
      switch (val) {
        case "dept":
        default:
          let content2 = !!(content?.length && content[0]?.url) ? content : "";
          Reflect.set(params, "updataType", val);
          Reflect.set(params, "type", "image");
          Reflect.set(params, "multiple", false);
          Reflect.set(params, "content", content2 || "");
          break;
      }
      Reflect.set(this.PictureInfos, "visible", true);
      Reflect.set(this.PictureInfos, "info", params);
    },
    // 选择图片
    handleSelect(value) {
      let info = Object();
      switch (value) {
        case "qrCode1":
          this.updateImg = value;
          let { qrcodeUrl1 } = this.optionsInfo;
          Reflect.set(info, "content", qrcodeUrl1);
          break;
        case "qrCode2":
          this.updateImg = value;
          let { qrcodeUrl2 } = this.optionsInfo;
          Reflect.set(info, "content", qrcodeUrl2);
          break;
        default:
          this.updateImg = "Logo";
          let { imageUrl } = this.optionsInfo;
          Reflect.set(info, "content", imageUrl);
      }
      Reflect.set(info, "type", 1);
      Reflect.set(this.PictureInfo, "visible", true);
      Reflect.set(this.PictureInfo, "info", info);
    },

    // 取消弹层
    handleCancel() {
      Reflect.set(this.PictureInfo, "visible", false);
    },
    handleCancels() {
      Reflect.set(this.PictureInfos, "visible", false);
    },
    // 替换LOGO
    handleSures(valInfo) {
      let { key, val } = valInfo;
      Reflect.set(this.optionsInfo, key, val);
    },
    // 替换LOGO
    handleSure(val) {
      if (this.$lodash.isEmpty(val)) return;
      switch (this.updateImg) {
        case "qrCode1":
          console.log(this.optionsInfo, val);
          Reflect.set(this.optionsInfo, "qrcodeUrl1", val.url);
          break;
        case "qrCode2":
          Reflect.set(this.optionsInfo, "qrcodeUrl2", val.url);
          break;
        default:
          Reflect.set(this.optionsInfo, "imageUrl", val);
      }
    },

    // 删除logo
    handleDeletePicture(value) {
      if (value === "qrCode1") {
        return (this.optionModel.headerConfig.qrcodeUrl1 = null);
      }
      if (value === "deptAreaUrl") {
        return Reflect.set(this.optionsInfo, value, []);
      }
      if (value === "qrCode2") {
        return (this.optionModel.headerConfig.qrcodeUrl2 = null);
      }
      this.optionModel.headerConfig.imageUrl = null;
    },

    handleChangeView(val) {
      let type = parseInt(val);
      switch (type) {
        case 1:
        case 4:
        case 5:
          Reflect.set(this.optionsInfo, "headHeight", 150);
          Reflect.set(this.optionsInfo, "deptFontSize", 68);
          break;
        case 2:
        case 3:
          Reflect.set(this.optionsInfo, "headHeight", 75);
          Reflect.set(this.optionsInfo, "deptFontSize", 40);
          break;
        default:
          Reflect.set(this.optionsInfo, "headHeight", 150);
          Reflect.set(this.optionsInfo, "deptFontSize", 68);
      }
    },
  },

  watch: {
    // 通过设备判定头部是否隐藏科室
    templateInfos: {
      handler: function (val) {
        let resolutionArr = this.$lodash.split(val.resolution, "*");
        if (resolutionArr?.length && resolutionArr.length >= 2) {
          if (resolutionArr[0] > resolutionArr[1]) {
            this.handleChange(true);
            this.contentDisabled = false;
          } else {
            this.handleChange(false);
            this.contentDisabled = true;
          }
        }
      },
      deep: true,
      immediate: true,
    },

    // 头部组件信息
    optionModel: {
      handler: function (val) {
        let key = val.config;
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.qrcodeMarBott {
  margin-bottom: 10px;
}

.logo-area-set {
  display: flex;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    display: flex;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin: 10px 0 20px 0;
      position: relative;
      overflow: hidden;

      img {
        border-radius: 12px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }

    .picture-wrap-qrcode {
      height: 80px;
      width: 80px;
      // margin: 10px 0 20px 0;
      position: relative;
      overflow: hidden;

      img {
        border-radius: 12px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 80px;
        height: 80px;
        // width: 108px;
        // height: 108px;
        cursor: pointer;
        // line-height: 116px;
        line-height: 80px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          // font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}

.column-info {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    el-select {
      width: 100% !important;
    }
  }
}
</style>
